<template>
  <div
    v-if="!loading"
    class="vc-app-list-nav-image"
    :style="visual.parseStyle(compStyle)"
  >
    <div
      v-if="dataList && dataList.length > 0"
      class="vc-app-list-nav-image-list"
    >
      <div
        v-for="(data, index) in dataList"
        :key="index"
        class="vc-app-list-nav-image-item"
      >
        <div>
          <img v-if='data["图片"]' :src='imageUrl + data["图片"]' alt />
          <cc-icon v-else iconId="018ece4f76dbdc838868" size="60" />
        </div>
        <div>{{data["名称"]}}</div>
      </div>
    </div>
    <div
      v-else
      class="vc-app-list-nav-image-empty"
      :style="visual.parseStyle(compStyle)"
    >
      <span style="margin-top: 20px;">暂无数据</span>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, nextTick, onMounted} from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([]);
const loading = ref(true);
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);

const init = async() => {
  loading.value = true;
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  await nextTick(() => loading.value = false);
};

const loadData = async() => {
  dataList.value = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
};

watch(() => props.node.compData?.refresh, () => {
  loadData();
});

onMounted(() => {
  init();
  loadData();
});
</script>

<style scoped lang="scss">
.vc-app-list-nav-image {
  width: 100%;
  display: flex;
  flex-direction: row;
  .vc-app-list-nav-image-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    gap: 10px;
    padding: 0 10px;
    .vc-app-list-nav-image-item {
      padding: 0 8px;
      white-space: nowrap;
      width: calc(20% - 8px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
  .vc-app-list-nav-image-list::-webkit-scrollbar {
    display: none;
  }
  .vc-app-list-nav-image-icon {
    width: 30px;
    margin-left: 10px;
    border-left: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vc-app-list-nav-image-empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>